<template>
    <div class="limiter">
        <div class="container-login100" style="background-image: url('/assets/images/img-01.jpg')">
            <div class="wrap-login100 p-t-190 p-b-30">
                <van-form @submit="onSubmit" class="login100-form validate-form">
                    <div class="login100-form-avatar">
                        <img src="/assets/images/avatar.png" alt="AVATAR" />
                    </div>

                    <span class="login100-form-title p-t-20 p-b-45">LOGIN</span>

                    <div class="wrap-input100 validate-input m-b-10" data-validate="请输入手机号码">
                        <van-field v-model="mobile" name="手机号码" label="" placeholder="手机号码" left-icon="phone-o"
                            :rules="[{ required: true, message: '请填写手机号码' }]" />
                    </div>

                    <div class="wrap-input100 validate-input m-b-10" data-validate="请输入密码">
                        <van-field v-model="password" type="password" name="密码" label="" placeholder="密码"
                            left-icon="bag-o" :rules="[{ required: true, message: '请填写密码' }]" />
                    </div>

                    <div class="container-login100-form-btn p-t-10">
                        <van-button round block type="success" native-type="submit">
                            登 录
                        </van-button>
                    </div>

                    <div class="text-center w-full p-t-25 p-b-230"></div>

                    <div class="text-center w-full">
                        <!-- 路由跳转 -->
                        <router-link to="/business/base/register" class="txt1">
                            立即注册
                            <i class="fa fa-long-arrow-right"></i>
                        </router-link>
                    </div>
                </van-form>
            </div>
        </div>
    </div>
</template>
<script setup>
// 引入路由
const router = useRouter();

// 引入cookie
const { cookies } = useCookies();

// 引入验证规则
const pattern = /^1[3456789]\d{9}$/;

// 定义响应式数据
const mobile = ref('')
const password = ref('')

// 提交表单
const onSubmit = async () => {
    let result = await Api.login({
        //传递参数
        mobile: mobile.value,
        password: password.value
    });
    if (result.code == 1) {
        cookies.set("LoginUser" , result.data)
        // 提示
        showSuccessToast({
            message: result.msg, // 提示信息
            onClose: () => { // 关闭回调
                // 跳 转
                router.push({
                    path: '/business/base/index',
                })
            }
        })
    } else {
        // 提示错误 手机号码已注册
        showFailToast(result.msg)
    }
};


</script>


<!-- 引入 css -->
<style>
@import url('/assets/fonts/font-awesome-4.7.0/css/font-awesome.min.css');
@import url('/assets/css/util.css');
@import url('/assets/css/main.css');
</style>

<style>
.container-login100::before {
    background: -webkit-linear-gradient(bottom, #0c7860, #463e54);
}
</style>